<template>
	<view class="container  ">
		<view class="finance-manage overflow-hidden padded-15 color-ffffff">
			<view class="overflow-hidden">
				<view class="margin-l-10 fl">
					<view class="text-16">剩余待还</view>
					<view class="text-20 margin-t-10">￥{{daihuan}}</view>
					<view class="text-14 margin-t-10">目标已完成 {{yihuanbl}}%</view>
				</view>
				<view class="fr charts-box">
					 <qiun-data-charts 
						   type="arcbar"
						   :opts="opts"
						   :chartData="chartData" 
						 />
				</view>
			</view>
			<view class="margin-t-15 overflow-hidden">
				<view class="col-25 fl text-center" @click="risk_policy">
					<image class="img" src="/static/image/index-01.jpg" mode="widthFix" ></image>
					<view>风险政策</view>
				</view>
				<view class="col-25 fl text-center" @click="toplanindex">
					<image class="img" src="/static/image/index-02.jpg" mode="widthFix" ></image>
					<view>过桥预案</view>
				</view>
				<view class="col-25 fl text-center" @click="notice">
					<image class="img" src="/static/image/index-03.png" mode="widthFix" ></image>
					<view>通知公告</view>
				</view>

				<view class="col-25 fl text-center" @click="showPopup">
					<image class="img" src="/static/image/index-04.jpg" mode="widthFix" ></image>
					<view>资料更新</view>
				</view>
			</view> 
			
		</view>
		<view class="margin-15">
			<view>
				<text class="text-16">优质产品推荐</text>
				<text class="fr color-5B7EE6" @click="recommend">更多</text>
			</view>
			<view v-if="tj.length > 0" class="bg-ffffff padded-10 border-radius-5 margin-t-15">
				<swiper style="height:420rpx;"  class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
				
						<swiper-item @click="cpxq(item.tj.id)" v-for="(item, index) in tj" :key="index" class="product-item" >
							<view class="product-child-left">
								<view class="">{{ item.tj.cpmc }}</view>
								<view class="color-D2D6DF">年化利率</view>
								<view class="text-16 font-weight color-36B365">
									<text>{{ item.tj.zxnhll }}%</text>
									<text class="fr margin-r-10">
										<image v-if="item.nhll > item.tj.zxnhll" class="up-img" src="/static/image/up.jpg"></image>
									</text>
								</view>
								<view class="color-D2D6DF">额度</view>
								<view class="text-16">
									<text>￥{{ item.tj.zgje }}</text>
									<text class="fr margin-r-10 color-FF8B20">
										<image v-if="item.dx == 'lt'" class="down-img" src="/static/image/down.jpg"></image>
										<image v-if="item.dx == 'gt'" class="up-img" src="/static/image/up.jpg"></image>
									</text>
								</view>	
								<view class="color-D2D6DF">还款方式</view>
								<view>{{ item.tj.hkfs }}</view> 
							</view>
							<view class="product-child-right text-right">
								<view>{{ item.cpname }}</view>
								<view>年化利率</view>
								<view>{{ item.nhll }}%</view>
								<view>额度</view>
								<view>￥{{ item.dkje }}</view>	
								<view class="color-D2D6DF">还款方式</view>
								<view>{{ item.hkfs }}</view>	 
							</view>
						</swiper-item>
						
				</swiper>
			</view>
            
			<view v-if="tj.length == 0" class="bg-ffffff padded-20 text-center border-radius-5">
				<view class="font-weight margin-t-15">暂无推荐</view>
				<view class="margin-t-5 color-838A99"  @click="showPopup">点击此处，补缺信用信息 !</view>
			</view>
		</view>
		<view class="tab-container margin-l-15">
			
		    <view 
		      class="tab-item" 
		      :class="{ 'active': currentTab === 0 }"
		      @click="currentTab = 0"
		    >
		      本月清单
		    </view>
		    <view 
		      class="tab-item" 
		      :class="{ 'active': currentTab === 1 }"
		      @click="currentTab = 1"
		    >
		      全部清单
		    </view>
		</view>	
		<view class="margin-15" v-if="qdqb.length == 0">
			<view class="text-16 bg-ffffff padded-20 text-center border-radius-5">
				<view class="font-weight margin-t-15">暂无推荐</view>
				<view class="margin-t-5 color-838A99"  @click="showPopup1">点击此处，填写产品信息 !</view>
			</view>
		</view>
		<view v-if="qdqb.length > 0" class="margin-b-15 overflow-hidden">
			<view class="bg-ffffff margin-15 padded-10 border-radius-5">已知产品本月剩余待还:￥{{ benqi }}</view>
				<view v-for="(item, index) in qdqb" :key="index">
					<view  v-if="item.tab === 2"> 

					<uni-card>
					<view   @click="clickJump(item.id)" class="uni-relative">
						<view class="margin-b-10 margin-t-10 color-000000">
							<text class="text-18 font-weight">{{ item.cpname }}</text>
							<!--<text class="fr label">产品变更</text>--> 
							<!--<text class="fr label">行业风险</text>-->
						</view>
						<view class="card-item" v-if="item.hkjh">
							<view class="card-item-label">本月待还：</view>
							<view class="card-item-text">￥{{ item.hkjh.bqje }}</view>
						</view>
						<view class="card-item" v-if="item.hkjh">
							<view class="card-item-label">最近还款日期：</view>
							<view class="card-item-text">{{ item.hkjh.date }}</view>
						</view>
						<view class="card-item">
							<view class="card-item-label">剩余待还：</view>
							<view class="card-item-text">{{ item.weihuan }}元/{{ item.whqs }}期</view>
						</view>	
						<view class="card-item">
							<view class="card-item-label">放款总额：</view>
							<view class="card-item-text">{{ item.zhonge }}元/{{ item.hkqs }}期</view>
						</view>	
						<image v-if="item.yq == 'yuqi'" class="yyq-img" src="/static/image/yyq.jpg" mode="widthFix"></image>
					</view>		
						
					</uni-card>
					
					</view>
					
					<view  v-if="item.tab === 1">
					
					<uni-card  v-show="currentTab">
					<view   @click="clickJump(item.id)" class="uni-relative">
						<view class="margin-b-10 margin-t-10 color-000000">
							<text class="text-18 font-weight">{{ item.cpname }}</text>
							<!--<text class="fr label">产品变更</text> -->
							<!--<text class="fr label">行业风险</text>-->
						</view>
						<view class="card-item">
							<view class="card-item-label">剩余待还：</view>
							<view class="card-item-text">{{ item.weihuan }}元/{{ item.whqs }}期</view>
						</view>	
						<view class="card-item">
							<view class="card-item-label">放款总额：</view>
							<view class="card-item-text">{{ item.zhonge }}元/{{ item.hkqs }}期</view>
						</view>	
						
					</view>		
						
					</uni-card>
					
					</view>
				</view>
		</view>
		<view v-if="qdqb.length > 0" class="margin-15  overflow-hidden">
			<button class="btn" type="primary" @click="toproductlist" >金融产品管理</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.getServerData();
		},
		data() {
			return {
				tj: [],
				qdqb: [],
				benqi:'0',
				daihuan:'0',
				yihuanbl:'0',
				
				currentTab:0, // 默认选中第一个
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				chartData: {},
				opts: {
				  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				  padding: undefined,
				  title: {
					name: "0%",
					fontSize: 18,
					color: "#2fc25b",
					backgroundColor: "#FFF", // 文字背景色（默认透明）
				  },
				  subtitle: {
					name: "",
					fontSize: 25,
					color: "#666666",
				  },
				  extra: {
					arcbar: {
					  type: "circle",
					  width: 12,
					  backgroundColor: "#F0F2F5",
					  startAngle: 1,
					  endAngle: 0.25,
					  gap: 2,
					  lineCap: "butt"
					}
				  }
				}

			}
		},
		onReady() {
			
		},
		methods: {
			getServerData() {
				this.$request(
					{wxurl: '/index.html'}
				).then(res => {
					// 验证登入
				})
				
				// 使用 GET 方法请求数据
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/indexs', // 请求地址
				    success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							
							this.benqi = res.data.benqi;
							this.daihuan = res.data.daihuan; 
							this.yihuanbl = res.data.yihuanbl;
							this.opts.title.name = res.data.yihuanbl+'%';
							
							this.qdqb = res.data.qdqb; 
							this.tj = res.data.tj; 
							
							setTimeout(() => {
							    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
							    let res = {
							        series: [
							          {
							            name: "",
							            color: "#36B365",
							            data: this.yihuanbl/100
							          }
							        ]
							    };
							    this.chartData = JSON.parse(JSON.stringify(res));
							}, 500);
						}

				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			//风险政策
			risk_policy(){
				uni.navigateTo({
				    url: '/pages/risk/index'
				});
			},
			//过桥预案
			toplanindex() {
			    uni.navigateTo({
			        url: '/pages/plan/index'
			    });
			},
			//通知公告
			notice(){
				uni.navigateTo({
				    url: '/pages/index/notice'
				});
			},
			toproductlist() {
			    uni.navigateTo({
			        url: '/pages/product/list'
			    });
			},
			showPopup(){
				uni.navigateTo({
				    url: '/pages/index/data_upload'
				});
			},
			showPopup1(){
				uni.navigateTo({
				    url: '/pages/product/applyform'
				});
			},
			clickJump(id) {
				uni.navigateTo({
				    url: '/pages/product/financedetail?id='+id
				});
			},
			cpxq(id) {
				uni.navigateTo({
				    url: '/pages/product/detail?id='+id
				});
				
			},
			recommend(){
				uni.navigateTo({
				    url: '/pages/product/recommend'
				});
			}
		}
	}
</script>

<style scoped>
	.yyq-img{
		height:55px !important;
		width: 55px !important;
		position: absolute;
		bottom: 5px;
		right: 0px;
	}
	.btn{
		margin-bottom:70px;
		font-size: 13px;
		padding:4px;
	}
	.label{
		background-color: #FEF2EA;
		color:#F8945A;
		padding:2px 8px ;
		font-size: 12px;
		border-radius: 5px;
		margin-left: 4px;
	}
	.tab-container {
	  display: flex;
	  width: 100%;
	}
	.tab-item {
	/*  flex: 1; */
	  text-align: center;
	  padding: 20rpx;
	  color: #666;
	}
	.tab-item.active {
	  font-size: 18px;
	  color: #2C8AFF;
	  font-weight: bold;
	}
	.product-item {
	  display: flex;
	  width: 100%;
	  height: 100rpx;
	  position: relative;
	}
	.product-child-left, .product-child-right {
	  flex: 1; /* 各占50% */
			align-items: center;
	  justify-content: center;
	}
	
	/* 中间的虚线（通过伪元素实现） */
	.product-item::after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  top: 10px;
	  bottom: 27px;
	  border-left: 1px dashed #F0F2F5;
	  transform: translateX(-50%);
	}
	
	.product-child-left > view,.product-child-right > view  {
	  margin-top: 10rpx; /* 统一设置上间距 */
	}
	::v-deep uni-swiper .uni-swiper-dots-horizontal{
		bottom: -10px !important;
	}
	::v-deep uni-swiper .uni-swiper-dot {
	    display: inline-block;
	    width: 33px;
	    height: 5px;
		background:#F3F3F3;
	
		border-radius: 0 !important;
	}
	::v-deep uni-swiper .uni-swiper-dot-active {
	    background-color: #5C92FF;
	}
	 .charts-box {
	    width: 50%;
	    height: 100px;
	  }
	.finance-manage{
		background-color:#2C8AFF;
		border-radius: 0 0 20px 20px;
	
	}
	.img{
		width:40px;
		height:40px;
		margin-right: 5px;
		
	}
	.card-item {
		overflow: hidden;
		padding: 5rpx 0;
	}
	
	.card-item-label {
		/* width: 140rpx; */
		float: left;
		color: #777978;
	}
	
	.card-item-text {
/* 		width: calc(100% - 140rpx); */
		float: left;
		color: #0F0F0F;
	}
	
	.card-actions {
		height: 90rpx;
		border-top: 1px #eee solid;
	}
	::v-deep .uni-card .uni-card__content{
		padding: 5px !important;
	}
	.container {
	
	}
	.up-img,.down-img{
		width:25px;height:25px
	}

</style>
